<template>
	<view lang="wxml">
		<!-- 搜索 -->
		<search />

		<!-- 分类 -->
		<view class="category">

			<view class="sup">
				<scroll-view scroll-y @scrolltolower="lower">
					<!-- class="active" -->
					<text v-for="(item,index) in topCategories" :key="item.cat_id" @tap="ac=index" :class="{active:index===ac}">{{item.cat_name}}</text>
				</scroll-view>
			</view>


			<view class="sub"> 
				<scroll-view scroll-y >
					<!-- 封面图 -->
					<image src="http://static.botue.com/ugo/uploads/category.png" class="thumb"></image>

					<!-- 二级 -->
					<view class="children" v-for="item in topCategories[ac].children" :key="item.cat_id" >
						<view class="title">{{item.cat_name}}</view>

						<!-- 三级 -->
						<view class="brands">
										<navigator  v-for="one in item.children" :url="'/pages/list/list?id='+item.cat_pid
">
												<image :src="one.cat_icon"></image>
												<text>{{one.cat_name}}</text>
										</navigator>
								</view>

					</view>
				</scroll-view>
			</view>


		</view>

	</view>
</template>


<script>
	export default {
		data() {
			return {
				topCategories: [],
				ac:0
			}
		},
		onLoad() {
			this.getTopCategories()
		},
		methods: {
			// 获取顶级（一级）分类
			async getTopCategories() {
				// 请求后端接口
				const {
					message
				} = await this.$request({
					url: '/api/public/v1/categories'
				});
				// 更新顶级分类
				this.topCategories = message;
				console.log(message,'message');
			},
			lower(){
				console.log(11111)
			}
		}

	}
</script>


<style scoped lang="less">
	scroll-view {
		height: 100%;
	}

	.category {
		display: flex;
		width: 100%;
		position: absolute;
		top: 100rpx;
		bottom: 0;

		.sup {
			width: 196rpx;
			background-color: #f4f4f4;

			text {
				display: block;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				font-size: 27rpx;
				color: #333;
				border-bottom: 1rpx solid #eee;

				&:last-child {
					border-bottom: none;
				}

				&.active {
					background-color: #FFF;
					color: #ea4451;
					position: relative;

					&::before {
						content: '';
						display: block;
						width: 8rpx;
						height: 60rpx;
						transform: translateY(-50%);
						background-color: #ea4451;

						position: absolute;
						left: 0;
						top: 50%;
					}
				}
			}
		}

		.sub {
			flex: 1;
			padding: 20rpx 18rpx;
			background-color: #fff;

			.thumb {
				width: 100%;
				height: 180rpx;
			}

			.children {
				text-align: center;
				color: #333;

				.title {
					display: inline-block;
					margin: 40rpx 0 20rpx;
					font-size: 30rpx;

					&::before {
						content: '/';
						margin-right: 20rpx;
						color: #666;
					}

					&::after {
						content: '/';
						margin-left: 20rpx;
						color: #666;
					}
				}
			}

			.brands {
				display: flex;
				flex-wrap: wrap;

				navigator {
					width: 33%;
					flex: 0.3;
					margin-bottom: 20rpx;
				}

				image {
					width: 120rpx;
					height: 120rpx;
				}

				text {
					display: block;
					font-size: 24rpx;
				}
			}
		}
	}
</style>